<template>
	<div class="vol_owner">
		<div class="vol_owner_base">
			<!-- <div class="avatar">
				<img v-if="userInfo.accountInfo.imgUrl" class="avatar__inner" :src="userInfo.accountInfo.imgUrl" alt="" />
				<img v-else class="avatar__inner" src="@/img/default-avatar.png" alt="" />
			</div> -->
			<div class="info">
				<h3 class="info_username">{{ userInfo.account }}</h3>
				<!-- <p class="info_mobile">{{ userInfo.accountInfo.phone }}</p> -->
			</div>
		</div>

		<div class="radius-sm over-hide">
			<van-cell title="我的余额" :value="`￥${getPrice(userInfo.remainingAmount)}`"></van-cell>
		</div>
		<div class="sign_out">
			<van-button type="danger" size="small" block @click="logout">退出登录</van-button>
		</div>
	</div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ref, computed, inject, onMounted} from 'vue'
import { useStore } from "vuex";
import { showConfirmDialog } from 'vant'
import useUtils from '@/hooks/useUtils'

const { getPrice } = useUtils();
const api = inject('api')
const store = useStore()
const router = useRouter()

const userInfo = computed(() => store.getters['user/getUserInfo'])

// 退出登录
const logout = () => {
	showConfirmDialog({
		title: '提示',
		message: '确定退出登录么？',
	}).then(() => {
		return api.logout()
	}).then(res => {
		if(res.code === 0){
			localStorage.removeItem('userInfo')
			localStorage.removeItem('token')
			router.replace("/login");
		}
	}).catch(() => {})
}

onMounted(() => {
	store.dispatch('user/apiGetUserInfo')
})
</script>
